<template>
    <div class="chamHeader">
        <div class="cham-banner">
            <div class="mini-header">
                <div class="mini-header__content">
                    <div style="float:left;width:40px;text-align:center;">
                        <span style="cursor:pointer" @click="goHome">主站</span>
                    </div>

                    <div style="float:left;width:40px;text-align:center;">
                        <span style="cursor:pointer" @click="goToFanju">番剧</span>
                    </div>

                    <div style="float:left;width:64px;text-align:center;">
                        <span style="cursor:pointer" @click="goToDianshiju">电视剧</span>
                    </div>

                    <div style="float:left;width:40px;text-align:center;">
                        <span style="cursor:pointer" @click="goToDianying">电影</span>
                    </div>

                    <div style="float:left;width:52px;text-align:center;">
                        <span style="cursor:pointer" @click="goToYinyue">音乐</span>
                    </div>

                    <div style="float:left;width:40px;text-align:center;">
                        <span style="cursor:pointer" @click="goToZhaiwu">宅舞</span>
                    </div>

                    <div style="float:left;width:50px;text-align:center;">
                        <span style="cursor:pointer" @click="goToZongyi">综艺</span>
                    </div>

                    <div style="float:left;" :style="{'width':searchHotPointWidth+'px'}">
                        <el-input placeholder="武汉肺炎-2019nCov" v-model="searchHotPoint" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>

                    <chamHeadImg></chamHeadImg>

                    <div style="float:left;width:90px;margin-left:10px;">
                        <div style="width:90px;height:40px;background-color:#FB7299;line-height:40px;text-align: center;border-radius:2px;cursor:pointer;" @click="goTougao">
                            投稿
                        </div>
                    </div>
                </div>
            </div>
            <div class="logo-module">
                <div class="mini-logo">
                    <img src="../assets/cham-logo.png" height="105" width="220"/>
                </div>
            </div>

        </div>




        <div class="navigate">
            <el-dropdown placement="bottom-start" style="float:left;" v-bind:class="navigateSelectIndex==1?'is-navi-active':''" >
                <span class="el-dropdown-link">
                    <div style="width:60px;text-align:center;" @click="goToFanju" v-bind:style="{'color':navigateSelectIndex==1?'#409eff':''}">
                        番剧
                    </div>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>连载动画</el-dropdown-item>
                    <el-dropdown-item>完结动画</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown placement="bottom-start" style="float:left;" v-bind:class="navigateSelectIndex==2?'is-navi-active':''" >
                <span class="el-dropdown-link">
                    <div style="width:70px;text-align:center;" @click="goToDianshiju" v-bind:style="{'color':navigateSelectIndex==2?'#409eff':''}">
                        电视剧
                    </div>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>日剧</el-dropdown-item>
                    <el-dropdown-item>港剧</el-dropdown-item>
                    <el-dropdown-item>国产剧</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

            <div style="float:left;width:60px;text-align:center;" v-bind:class="navigateSelectIndex==3?'is-navi-active':''" >
                <span @click="goToDianying" class="navigate-no-dropdown" v-bind:style="{'color':navigateSelectIndex==3?'#409eff':''}">
                    电影
                </span>
            </div>

            <el-dropdown placement="bottom-start" style="float:left;" v-bind:class="navigateSelectIndex==4?'is-navi-active':''" >
                <span class="el-dropdown-link">
                     <div style="width:60px;text-align:center;" @click="goToYinyue" v-bind:style="{'color':navigateSelectIndex==4?'#409eff':''}">
                        音乐
                    </div>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>原创音乐</el-dropdown-item>
                    <el-dropdown-item>翻唱</el-dropdown-item>
                    <el-dropdown-item>MV</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
<!--            <el-dropdown placement="bottom-start" style="float:left;" v-bind:class="navigateSelectIndex==4?'is-navi-active':''" >-->
<!--                <span class="el-dropdown-link">-->
<!--                     <div style="width:50px;text-align:center;" v-bind:style="{'color':navigateSelectIndex==4?'#409eff':''}">-->
<!--                        国创-->
<!--                    </div>-->
<!--                </span>-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item>国产动画</el-dropdown-item>-->
<!--                    <el-dropdown-item>国产原创相关</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </el-dropdown>-->
            <div style="float:left;width:60px;text-align:center;" v-bind:class="navigateSelectIndex==5?'is-navi-active':''" >
                <span class="navigate-no-dropdown" @click="goToZhaiwu" v-bind:style="{'color':navigateSelectIndex==5?'#409eff':''}">
                    宅舞
                </span>
            </div>
<!--            <el-dropdown placement="bottom-start" style="float:left;" v-bind:class="navigateSelectIndex==7?'is-navi-active':''" >-->
<!--                <span class="el-dropdown-link">-->
<!--                      <div style="width:50px;text-align:center;" v-bind:style="{'color':navigateSelectIndex==7?'#409eff':''}">-->
<!--                        科技-->
<!--                    </div>-->
<!--                </span>-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item>趣味科普人文</el-dropdown-item>-->
<!--                    <el-dropdown-item>野生技术协会</el-dropdown-item>-->
<!--                    <el-dropdown-item>演讲.公开课</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </el-dropdown>-->
            <div style="float:left;width:60px;text-align:center;" v-bind:class="navigateSelectIndex==6?'is-navi-active':''" >
                <span class="navigate-no-dropdown" @click="goToZongyi" v-bind:style="{'color':navigateSelectIndex==6?'#409eff':''}">
                    综艺
                </span>
            </div>

            <div style="float:left;width:70px;text-align:center;" v-bind:class="navigateSelectIndex==7?'is-navi-active':''" >
                <span class="navigate-no-dropdown" @click="goToAsmr" v-bind:style="{'color':navigateSelectIndex==7?'#409eff':''}">
                    ASMR
                </span>
            </div>
<!--            <el-dropdown placement="bottom-start" style="float:left;" v-bind:class="navigateSelectIndex==9?'is-navi-active':''" >-->
<!--                <span class="el-dropdown-link">-->
<!--                       <div style="width:50px;text-align:center;" v-bind:style="{'color':navigateSelectIndex==9?'#409eff':''}">-->
<!--                        生活-->
<!--                    </div>-->
<!--                </span>-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item>搞笑</el-dropdown-item>-->
<!--                    <el-dropdown-item>日常</el-dropdown-item>-->
<!--                    <el-dropdown-item>手工</el-dropdown-item>-->
<!--                    <el-dropdown-item>绘画</el-dropdown-item>-->
<!--                    <el-dropdown-item>运动</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </el-dropdown>-->
            <div style="float:left;width:80px;text-align:center;" v-bind:class="navigateSelectIndex==8?'is-navi-active':''" >
                <span class="navigate-no-dropdown"  @click="goToDianzigeji" v-bind:style="{'color':navigateSelectIndex==8?'#409eff':''}">
                    电子歌姬
                </span>
            </div>
<!--            <el-dropdown placement="bottom-start" style="float:left;" v-bind:class="navigateSelectIndex==10?'is-navi-active':''" >-->
<!--                <span class="el-dropdown-link">-->
<!--                     <div style="width:50px;text-align:center;" v-bind:style="{'color':navigateSelectIndex==10?'#409eff':''}">-->
<!--                        鬼畜-->
<!--                    </div>-->
<!--                </span>-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item>鬼畜调教</el-dropdown-item>-->
<!--                    <el-dropdown-item>音MAD</el-dropdown-item>-->
<!--                    <el-dropdown-item>教程演示</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </el-dropdown>-->
<!--            <el-dropdown placement="bottom-start" style="float:left;" v-bind:class="navigateSelectIndex==11?'is-navi-active':''" >-->
<!--                <span class="el-dropdown-link">-->
<!--                     <div style="width:50px;text-align:center;" v-bind:style="{'color':navigateSelectIndex==11?'#409eff':''}">-->
<!--                        时尚-->
<!--                    </div>-->
<!--                </span>-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item>美妆</el-dropdown-item>-->
<!--                    <el-dropdown-item>服饰</el-dropdown-item>-->
<!--                    <el-dropdown-item>健身</el-dropdown-item>-->
<!--                    <el-dropdown-item>T台</el-dropdown-item>-->
<!--                    <el-dropdown-item>风向标</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </el-dropdown>-->

            <div style="float:left;width:70px;text-align:center;" v-bind:class="navigateSelectIndex==9?'is-navi-active':''" >
                <span class="navigate-no-dropdown" @click="goToJilupian" v-bind:style="{'color':navigateSelectIndex==9?'#409eff':''}">
                    纪录片
                </span>
            </div>


            <div style="float:left;width:60px;text-align:center;" v-bind:class="navigateSelectIndex==10?'is-navi-active':''" >
                <span class="navigate-no-dropdown" @click="goToShengyou" v-bind:style="{'color':navigateSelectIndex==10?'#409eff':''}">
                    声优
                </span>
            </div>
<!--            <el-dropdown placement="bottom-start" style="float:left;" v-bind:class="navigateSelectIndex==13?'is-navi-active':''" >-->
<!--                <span class="el-dropdown-link">-->
<!--                    <div style="width:50px;text-align:center;" v-bind:style="{'color':navigateSelectIndex==13?'#409eff':''}">-->
<!--                        娱乐-->
<!--                    </div>-->
<!--                </span>-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item>综艺</el-dropdown-item>-->
<!--                    <el-dropdown-item>明星</el-dropdown-item>-->
<!--                    <el-dropdown-item>芦田爱菜</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </el-dropdown>-->
<!--            <el-dropdown placement="bottom-start" style="float:left;" v-bind:class="navigateSelectIndex==14?'is-navi-active':''" >-->
<!--                <span class="el-dropdown-link">-->
<!--                   <div style="width:50px;text-align:center;" v-bind:style="{'color':navigateSelectIndex==14?'#409eff':''}">-->
<!--                        影视-->
<!--                    </div>-->
<!--                </span>-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item>影视杂谈</el-dropdown-item>-->
<!--                    <el-dropdown-item>影视剪辑</el-dropdown-item>-->
<!--                    <el-dropdown-item>短片</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </el-dropdown>-->



<!--            <div style="float:left;width:50px;text-align:center;" v-bind:class="navigateSelectIndex==11?'is-navi-active':''" >-->
<!--                <span class="navigate-no-dropdown" v-bind:style="{'color':navigateSelectIndex==11?'#409eff':''}">-->
<!--                    偶像-->
<!--                </span>-->
<!--            </div>-->

<!--            <div style="float:left;width:65px;text-align:center;" v-bind:class="navigateSelectIndex==12?'is-navi-active':''" >-->
<!--                <span class="navigate-no-dropdown" v-bind:style="{'color':navigateSelectIndex==12?'#409eff':''}">-->
<!--                    纪录片-->
<!--                </span>-->
<!--            </div>-->

<!--            <div style="float:left;width:60px;text-align:center;" v-bind:class="navigateSelectIndex==13?'is-navi-active':''" >-->
<!--                <span class="navigate-no-dropdown" v-bind:style="{'color':navigateSelectIndex==13?'#409eff':''}">-->
<!--                    广播剧-->
<!--                </span>-->
<!--            </div>-->

<!--            <div style="float:left;width:70px;text-align:center;" v-bind:class="navigateSelectIndex==14?'is-navi-active':''" >-->
<!--                <span class="navigate-no-dropdown" v-bind:style="{'color':navigateSelectIndex==14?'#409eff':''}">-->
<!--                    剧场版-->
<!--                </span>-->
<!--            </div>-->

            <!--            <span class="navigate-no-dropdown">-->
            <!--                电影<i class="el-icon-arrow-down el-icon--right"></i>-->
            <!--            </span>-->

            <!--            <span class="navigate-no-dropdown">-->
            <!--                电视剧<i class="el-icon-arrow-down el-icon--right"></i>-->
            <!--            </span>-->

            <!--            <span class="navigate-no-dropdown">-->
            <!--                纪录片<i class="el-icon-arrow-down el-icon--right"></i>-->
            <!--            </span>-->
        </div>
    </div>
</template>

<script>

    import chamHeadImg from '@/components/headImg/chamHeadImg'

    export default {
        name: 'chamHeader',
        inject:['reload'],
        components:{chamHeadImg},
        props:{
            isHome:{
                type:Boolean,
                default:false
            }
        },

        data () {
            return {
                navigateSelectIndex:this.$store.getters.getNavigateSelectIndex,//一级导航选中的编号
                searchHotPoint:"",//查询热点信息
                userHeadUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                showLoginAndRegister:true,
                showUserInfo:false,
                searchHotPointWidth: 450,
                isHeadImgHover:false,
                showHeadImgDetail:false,
                showHeadImgMini:true,
                selectedUserNavigater:0,
                isDropDownClick:true
            }
        },
        created(){
            var self = this;
            var storage=window.localStorage;
            var chamToken = storage.getItem("chamToken");

            if(chamToken!=null){
                self.showLoginAndRegister = false;
                self.showUserInfo = true;
                self.searchHotPointWidth = 350;

            }

        },
        destroyed() {
            // debugger;
            this.$store.commit('setNavigateSelectIndex', 0);
            this.$store.commit('setNaviSecondSelectIndex', 0);
        },
        methods:{
            clickNavigater(index){
                var self = this;
                if(index===1){
                    self.selectedUserNavigater = 1;
                    self.$router.push({path:'/personalCentre'});
                }

                if(index===2){
                    self.selectedUserNavigater = 2;
                }

                if(index===3){
                    self.selectedUserNavigater = 3;
                }

                if(index===4){
                    self.selectedUserNavigater = 4;
                }

                if(index===5){
                    self.selectedUserNavigater = 5;
                }

                if(index===6){
                    self.selectedUserNavigater = 6;
                    //执行退出逻辑
                    var localStorage = window.localStorage;
                    localStorage.removeItem("chamToken");
                    //调用reload()方法重新加载主页面
                    self.reload();
                    //self.$router.go(0);
                }
            },
            headImgHover(){
                var self = this;
                self.showHeadImgDetail = true;
                self.showHeadImgMini = false;
                self.isHeadImgHover = true;

            },
            headImgDetailOut(){
                this.isHeadImgHover = false;
                this.showHeadImgDetail = false;
                this.showHeadImgMini = true;
                this.selectedUserNavigater = 0;
            },
            goHome(){
                var isHome = this.isHome;
                this.$store.commit('setNavigateSelectIndex', 0);
                if(isHome){
                    this.reload();
                    return;
                }

                if(!isHome){
                    this.$router.push('/home');
                    return;
                }

            },
            goToFanju(){
                this.$store.commit('setNavigateSelectIndex', 1);
                this.$store.commit('setNaviSecondSelectIndex', 0);
                this.$router.push({path:'/fanju'});
            },
            goToDianshiju(){
                //debugger;
                this.$store.commit('setNavigateSelectIndex', 2);
                this.$store.commit('setNaviSecondSelectIndex', 0);
                this.$router.push({path:'/dianshiju'});
            },
            goToDianying(){
                //debugger;
                this.$store.commit('setNavigateSelectIndex', 3);
                this.$store.commit('setNaviSecondSelectIndex', 0);
                this.$router.push({path:'/dianying'});
            },
            goToYinyue(){
                this.$store.commit('setNavigateSelectIndex', 4);
                this.$store.commit('setNaviSecondSelectIndex', 0);
                this.$router.push({path:'/yinyue'});
            },
            goToZhaiwu(){
                this.$store.commit('setNavigateSelectIndex', 5);
                this.$store.commit('setNaviSecondSelectIndex', 0);
                this.$router.push({path:'/zhaiwu'});
            },
            goToZongyi(){
                this.$store.commit('setNavigateSelectIndex', 6);
                this.$store.commit('setNaviSecondSelectIndex', 0);
                this.$router.push({path:'/zongyi'});
            },
            goToAsmr(){
                this.$store.commit('setNavigateSelectIndex', 7);
                this.$store.commit('setNaviSecondSelectIndex', 0);
                this.$router.push({path:'/asmr'});
            },
            goToDianzigeji(){
                this.$store.commit('setNavigateSelectIndex', 8);
                this.$store.commit('setNaviSecondSelectIndex', 0);
                this.$router.push({path:'/dianzigeji'});
            },
            goToJilupian(){
                this.$store.commit('setNavigateSelectIndex', 9);
                this.$store.commit('setNaviSecondSelectIndex', 0);
                this.$router.push({path:'/jilupian'});
            },
            goToShengyou(){
                this.$store.commit('setNavigateSelectIndex', 10);
                this.$store.commit('setNaviSecondSelectIndex', 0);
                this.$router.push({path:'/shengyou'});
            },
            goTougao(){
                this.$router.push({path:'/chamTougao'});
            },
            doRegistry(){
                /**
                 * 通过路由跳转的方式跳转到registry页面！
                 */
                this.$router.push({path:'/registry'});
            },
            doLogin(){
                this.$router.push({path:'/login'});
            }
        }
    }
</script>

<style scoped>
    .chamHeader{
        width:100%;
        height:195px;
        margin-bottom:10px;
        min-width:999px;
    }

    /**
        没有下拉框的导航栏
     */
    .navigate-no-dropdown{
        color:#606266;
        cursor:pointer;
    }

    .navigate-no-dropdown:hover{
        color:#1890ff;
    }

    .cham-banner{
        width:100%;
        height:155px;
        min-width:999px;
        background-image:url('../assets/banner.png');
        /**
         * 这个属性最重要，这个属性可以让图片左右自动居中，多余的部分隐藏掉
         */
        background-position: center 0;
    }

    .mini-header{
        height:56px;
        width:100%;
        /**
         * 背景色渐变
         */
        background-image:linear-gradient(rgba(51,51,51,0.6),rgba(51,51,51,0));
    }

    .mini-header__content{
        width:999px;
        height:36px;
        line-height:36px;
        margin:auto auto;
        padding:10px 24px;
    }

    .normal-span{
        margin-left:5px;
        cursor:pointer;
    }

    .navigate{
        width:999px;
        height:40px;
        margin:auto auto;
        line-height:40px;
        border-bottom: solid 1px #e6e6e6;
    }

    .el-dropdown-link:hover{
        color:#1890ff;
    }

    .el-dropdown-link{
        cursor:pointer;
    }

    .logo-module{
        width:999px;
        height:100px;
        margin:auto auto;
    }

    .mini-logo{
        width:220px;
        height:105px;
        margin-top:-10px;
        margin-left:40px;
        cursor:pointer;
    }

    .head-img-hover{
        top:20px;
        left:2px;
    }

    .choas-divider--horizontal {
        display: block;
        height: 1px;
        width: 100%;
        background-color: #DCDFE6;
        position: relative;
        margin-top:-20px;
        margin-bottom:5px;
        /* margin: 24px 0; */
    }

    /**
    关注+粉丝+动态模块
     */
    .guanzhu-fensi-dongtai{
        float:left;
        width:33%;
        height:50px;
        text-align:center;
    }


    .guanzhu-fensi-dongtai:hover div{
        color:#73c9e5 !important;
    }

    .cham-user-navigater{
        /*width:calc(100% - 40px);*/
        height:60px;
        /*margin-left:20px;*/
        line-height:60px;

    }

    .cham-user-navigater:hover{
        background-color:#ECF5FF;
    }

    .cham-navigater-is-selected{
        background-color:#ECF5FF;
    }

    .cham-navigater-is-selected > svg,.cham-navigater-is-selected >span{
        color:#409EFF !important;
    }

    ul {
        display: block;
        /*list-style-type: disc;*/
        /*margin-block-start: 1em;*/
        /*margin-block-end: 1em;*/
        /*margin-inline-start: 0px;*/
        /*margin-inline-end: 0px;*/
        /*padding-inline-start: 40px;*/
    }

    .el-menu--horizontal>.el-menu-item.is-active {
        border-bottom: 2px solid #409EFF;
        color: #303133;
    }

    /*border-bottom: solid 1px #e6e6e6;*/

    /**
    导航 激活
     */
    .is-navi-active{
        border-bottom: 2px solid #409eff;
    }

</style>
